<template>
  <div class="index-wrapper">
    <header class="header">
      <nav @click="goToStatistics" class="back" v-show="!titleShow">＜返回</nav>
      <h1 v-if="titleShow" class="header-title">突发事故传染病统计</h1>
      <h1 v-else class="header-title">突发事故传染病流水</h1>
      <nav @click="goToFlow" class="view" v-show="titleShow">流水＞</nav>
    </header>
    <van-popup
      v-model="show"
      position="top"
      :style="{ height: '30%' }"
      :get-container="getContainer"
    >
      <ul class="filters">
        <li class="filter">
          <span class="title">日期区间</span>
          <input type="text" v-model="dateRange" class="text" @click="dateShow=true" />
          <span class="delete" @click="dateRange=''">x</span>
        </li>
        <li class="filter" v-for="(item,index) of filters" :key="index">
          <span class="title">{{item.name}}</span>
          <input type="text" v-model="$data[item.valueField]" class="text" @click="openWin(index)" />
          <span class="delete" @click="clearData(index)">x</span>
        </li>
        <li class="filter">
          <span class="title">腕带编码</span>
          <input type="text" v-model="wristBand" class="text" />
          <span class="delete" @click="wristBand=''">x</span>
        </li>
        <li class="btns">
          <button class="clear" @click="clearAll">清除</button>
          <button class="search" @click="search">查询</button>
        </li>
      </ul>
      <ul>
        <li>
          <van-calendar v-model="dateShow" type="range" @confirm="dateConfirm" :min-date="minDate" />
        </li>
        <li>
          <van-popup v-model="pickerShow" round position="bottom">
            <van-picker
              show-toolbar
              :columns="options"
              @cancel="pickerShow = false"
              @confirm="pickerConfirm"
            />
          </van-popup>
        </li>
      </ul>
    </van-popup>
    <router-view></router-view>
  </div>
</template>

<script>
import Filter from "./Filter";
import FooterNav from "./FooterNav";
let moment = require("moment");
export default {
  name: "Index",
  components: {
    filters: Filter,
    "footer-nav": FooterNav
  },
  data() {
    return {
      sign: 0,
      timer: "",
      show: false,
      dateShow: false,
      dateRange: "",
      pickerShow: false,
      sendAddress: "",
      swddOptions: "",
      alertLevel: "",
      alertLevelCode: "",
      yjjbOptions: "",
      eventLevel: "",
      sjdjOptions: "",
      eventType: "",
      sjlxOptions: "",
      options: "",
      selectIndex: "",
      wristBand: "",
      filters: [
        { name: "送往地点", valueField: "sendAddress" },
        { name: "预警级别", valueField: "alertLevel" },
        { name: "事件等级", valueField: "eventLevel" },
        { name: "事故类型", valueField: "eventType" }
      ],
      titleShow: true,
      minDate: CALENDARSTART,
    };
  },
  methods: {
    touchstart() {
      this.sign = 0;
      this.timer = setTimeout(() => {
        this.sign = 1;
        this.show = true;
      }, 1000);
    },
    touchend() {
      if (this.sign === 0) {
        clearTimeout(this.timer);
      }
    },
    getContainer() {
      return document.querySelector(".index-wrapper");
    },
    formatDate(date) {
      //console.log(date);
      return moment(date).format("yyyy-MM-DD");
      //`${date.getMonth() + 1}/${date.getDate()}`;
    },
    dateConfirm(date) {
      const [start, end] = date;
      this.dateShow = false;
      this.dateRange = `${this.formatDate(start)} -> ${this.formatDate(end)}`;
    },
    openWin(index) {
      this.pickerShow = true;
      this.selectIndex = index;
      switch (index) {
        case 0:
          this.options = this.swddOptions;
          break;
        case 1:
          this.options = this.yjjbOptions;
          break;
        case 2:
          this.options = this.sjdjOptions;
          break;
        case 3:
          this.options = this.sjlxOptions;
          break;
      }
    },
    pickerConfirm(value) {
      this.pickerShow = false;
      switch (this.selectIndex) {
        case 0:
          this.sendAddress = value.text;
          break;
        case 1:
          this.alertLevel = value.text;
          this.alertLevelCode = value.id;
          break;
        case 2:
          this.eventLevel = value.text;
          break;
        case 3:
          this.eventType = value.text;
          break;
      }
    },
    clearData(index) {
      switch (index) {
        case 0:
          this.sendAddress = "";
          break;
        case 1:
          this.alertLevel = "";
          this.alertLevelCode = "";
          break;
        case 2:
          this.eventLevel = "";
          break;
        case 3:
          this.eventType = "";
          break;
      }
    },
    clearAll() {
      this.dateRange = "";
      this.sendAddress = "";
      this.alertLevel = "";
      this.eventLevel = "";
      this.eventType = "";
      this.wristBand = "";
      this.alertLevelCode = "";
    },
    search() {
      this.show = false;
      this.GetDiseaseStatisticsByAlertLevel();
      this.GetDiseaseStatisticsBySendAdd();
      this.GetDiseaseFlow();
    },
    GetSendAddressList() {
      this.$axios({
        url: "/Dictionary/Hospital",
        method: "get",
        params: {
          selected: 0
        }
      }).then(res => {
        if (res.status === 200) {
          this.swddOptions = res.data;
        }
      });
    },
    GetAlertLevelList() {
      this.$axios({
        url: "/Dictionary/AlertLevel",
        method: "get",
        params: {
          selected: 0
        }
      }).then(res => {
        if (res.status === 200) {
          this.yjjbOptions = res.data;
        }
      });
    },
    GetEventLevelList() {
      this.$axios({
        url: "/Dictionary/GetComboboxList",
        method: "get",
        params: {
          selected: 0,
          tableName: "TZAccidentLevel",
          connection: 0
        }
      }).then(res => {
        if (res.status === 200) {
          this.sjdjOptions = res.data;
        }
      });
    },
    GetEventTypeList() {
      this.$axios({
        url: "/Dictionary/GetComboboxList",
        method: "get",
        params: {
          selected: 0,
          tableName: "TZAccidentType",
          connection: 0
        }
      }).then(res => {
        if (res.status === 200) {
          this.sjlxOptions = res.data;
        }
      });
    },
    GetDiseaseStatisticsByAlertLevel() {
      let start, end;
      if (this.dateRange === "") {
        start = "";
        end = "";
      } else {
        let date = this.dateRange.split("->");
        start = date[0].trim();
        end = date[1].trim();
      }
      //console.log(date);
      this.$axios({
        url: "/Invoke_Statistic/GetInfectiousDiseaseClassify",
        method: "post",
        data: {
          startTime: start,
          endTime: end,
          eventType: this.eventType,
          eventLevel: this.eventLevel,
          sendAddress: this.sendAddress,
          alertLevel: this.alertLevelCode,
          wristBand: this.wristBand
        }
      }).then(res => {
        // console.log(res);
        if (res.status === 200) {
          this.$store.dispatch("saveAlertLevel", res.data);
        }
      });
    },
    GetDiseaseStatisticsBySendAdd() {
      let start, end;
      if (this.dateRange === "") {
        start = "";
        end = "";
      } else {
        let date = this.dateRange.split("->");
        start = date[0].trim();
        end = date[1].trim();
      }
      //console.log(date);
      this.$axios({
        url: "/Invoke_Statistic/GetDiseaseStatisticsBySendAdd",
        method: "post",
        data: {
          startTime: start,
          endTime: end,
          eventType: this.eventType,
          eventLevel: this.eventLevel,
          sendAddress: this.sendAddress,
          alertLevel: this.alertLevelCode,
          wristBand: this.wristBand
        }
      }).then(res => {
        if (res.status === 200) {
          //console.log(res);
          this.$store.dispatch("saveSendAdd", res.data);
        }
      });
    },
    GetDiseaseFlow() {
      let start, end;
      if (this.dateRange === "") {
        start = "";
        end = "";
      } else {
        let date = this.dateRange.split("->");
        start = date[0].trim();
        end = date[1].trim();
      }
      //console.log(date);
      this.$axios({
        url: "/Invoke_Statistic/GetInfectiousDiseaseFlow",
        method: "post",
        data: {
          startTime: start,
          endTime: end,
          eventType: this.eventType,
          eventLevel: this.eventLevel,
          sendAddress: this.sendAddress,
          alertLevel: this.alertLevelCode,
          wristBand: this.wristBand
        }
      }).then(res => {
        if (res.status === 200) {
          //console.log(res);
          this.$store.dispatch("saveDiseaseList", res.data);
        }
      });
    },
    goToStatistics() {
      this.titleShow = true;
      this.$router.go(-1);
    },
    goToFlow() {
      this.titleShow = false;
      this.$router.push({ name: "Flow" }).catch(err => err);
    }
  },
  mounted() {
    let indexDom = document.querySelector(".index-wrapper");
    indexDom.addEventListener("touchstart", this.touchstart, { native: false });
    indexDom.addEventListener("touchmove", this.touchmove, { native: false });
    indexDom.addEventListener("touchend", this.touchend, { native: false });
    indexDom.addEventListener("contextmenu", e => e.preventDefault());
    this.$router.push({ name: "Statistics" }).catch(err => err);
    let start = DEFAULTSTART;
    //console.log()
    // console.log(start);
    let end = new Date(Date.now() + 1 * 24 * 60 * 60 * 1000);
    this.dateRange = `${this.formatDate(start)} -> ${this.formatDate(end)}`;
    this.GetSendAddressList();
    this.GetAlertLevelList();
    this.GetEventLevelList();
    this.GetEventTypeList();
    this.GetDiseaseStatisticsByAlertLevel();
    this.GetDiseaseStatisticsBySendAdd();
    this.GetDiseaseFlow();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  background: #99cccc;
  color: #fff;
  position: relative;
  /* height: 50px;
  display: flex;
  align-items: center; */
  padding: 5px 0;
}
.back {
  position: absolute;
  top: 12px;
  left: 5px;
  /* cursor: pointer; */
}
.back:active,
.view:active {
  color: hotpink;
}
.view {
  position: absolute;
  top: 12px;
  right: 5px;
}
.header-title {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  font-size: 21px;
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.filters {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  /* flex-grow: 1; */
}
.filter {
  display: flex;
  justify-content: space-between;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* padding: 10px 0; */
}
.delete {
  position: absolute;
  right: 5px;
  top: 4px;
}
.title {
  position: absolute;
  left: 5px;
  top: 4px;
}
.text {
  flex-grow: 1;
  padding: 4px 0;
  padding-left: 100px;
  border: none;
}
.btns {
  display: flex;
}
.search,
.clear {
  background: rgba(200, 50, 50, 0.6);
  /* width: 100%; */
  padding: 4px 0;
  color: #fff;
  border-radius: 2px;
  flex-grow: 1;
}
.search {
  margin-left: 5px;
}
</style>
